import { ref, toRefs, reactive } from "vue";
import { defineStore } from "pinia";

export const usePlayerState = defineStore("playerState", () => {
  const ingLoadingCount = ref(0);
  // 画板信息
  const canvasOptions = reactive({
    width: 0,
    height: 0,
  });
  // 播放器缩放比例，缩放2倍可以节约性能
  const PLAYER_SCALE = 2;

  // 分辨率选项 横屏（1280x720）竖屏（720x1280）
  const resolutions = {
    PORTRAIT: { width: 720, height: 1280 },
    LANDSCAPE: { width: 1280, height: 720 },
  };

  // 当前选择的分辨率类型
  const currentResolution = ref<keyof typeof resolutions>("PORTRAIT");

  // 播放器设置
  const playerConfig = reactive({
    playerWidth: resolutions.PORTRAIT.width / PLAYER_SCALE,
    playerHeight: resolutions.PORTRAIT.height / PLAYER_SCALE,
  });

  // 切换分辨率
  function changeResolution(resolutionType: keyof typeof resolutions) {
    currentResolution.value = resolutionType;
    playerConfig.playerWidth = resolutions[resolutionType].width / PLAYER_SCALE;
    playerConfig.playerHeight =
      resolutions[resolutionType].height / PLAYER_SCALE;
  }

  const existVideo = ref(false);
  const playStartFrame = ref(0); // 当前播放帧
  const playTargetTrackMap = ref(new Map()); // 当前播放的元素集合
  const isPause = ref(true);

  return {
    isPause,
    playStartFrame,
    ingLoadingCount,
    playTargetTrackMap,
    existVideo,
    ...toRefs(playerConfig),
    canvasOptions,
    PLAYER_SCALE,
    resolutions,
    currentResolution,
    changeResolution,
  };
});
